<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增礼物')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-gift-add" enctype="multipart/form-data">
        <div class="form-group">
            <label class="col-sm-3 control-label">礼物名称：</label>
            <div class="col-sm-8">
                <input name="giftName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">需要钻石数量：</label>
            <div class="col-sm-8">
                <input name="diamond" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">礼物金额：</label>
            <div class="col-sm-8">
                <input name="money" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">状态：</label>
            <div class="col-sm-8">
                <div class="radio-box">
                    <select name="status">
                        <option th:value="1">启用</option>
                        <option th:value="0">取消</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">礼物图片：</label>
            <div class="col-sm-8">
                <!--<input id="giftUrl" name="giftUrl" type="file" onchange="gift()" accept="image/*">-->
                <input id="giftUrl" name="files" class="form-control" type="file" onchange="gift()">
                <input id="url" name="giftUrl" class="form-control aa" type="text" style="display: none">
                <div class="aa"/>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: bootstrap-fileinput-css"/>
<th:block th:include="include :: datetimepicker-css" />
<script type="text/javascript">
    var prefix = ctx + "app/gift"
    $("#form-gift-add").validate({
        focusCleanup: true
    });

    /*//监听input变动,变动会触发gift方法
    function gift() {
        var formData = new FormData();
         formData:{
            fileType:"image"
        }
        // console.log(document.getElementById("#giftUrl"))
        var file = document.querySelector("#giftUrl").files[0];
        console.log(file)
        formData.append("files", file);
        $.ajax({
            url: "http://211.159.151.130:8083/pengpeng/qiniu/uploadFiles",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            async: false,
            success: function (result) {
                if(result.code==0){
                    $("input[name='giftUrl']").val(result.data[0].url);
                    console.log(result.data[0].url)
                }else{
                    alert("文件上传失败")
                }
            }
        })
    }*/

    var img = [];
    //单独上传图片
    $(document).ready(function () {
        // console.log($('#form-village-add').serialize())
        $("#giftUrl").fileinput({
            showUpload: false,
            //设置语言
            language: 'zh',
            //异步上传
            uploadAsync: true,
            dropZoneEnabled: true,
            uploadUrl: ctx + "qiniu/uploadFiles",
            maxFileCount: 1,
            resizeImage: false,
            showCaption: false,
            showPreview: true,
            //预览项设置
            layoutTemplates:{
                //去除详细预览
                actionZoom:'',
            },
            allowedFileTypes: ['image'],
            browseClass: "btn btn-primary btn-lg",
            //自动替换当前文件
            autoReplace:true,
        }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
        }).on("fileuploaded", function (event, data) {
            if (data.response) {
                img[img.length] = data.response.data[0].url;
                $(".aa").val(data.response.data[0].url);
            }
        });
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-gift-add').serialize());
        }
    }
</script>
</body>
</html>